<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memento Dictionary</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .header {
            background: rgba(255, 255, 255, 0.95);
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .header h1 {
            color: #333;
            font-size: 28px;
            margin-bottom: 10px;
        }

        .search-container {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }

        .search-input {
            flex: 1;
            padding: 12px 16px;
            font-size: 16px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            outline: none;
            transition: border-color 0.3s;
        }

        .search-input:focus {
            border-color: #667eea;
        }

        .search-button {
            padding: 12px 24px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .search-button:hover {
            background: #5568d3;
        }

        .main-content {
            flex: 1;
            display: flex;
            padding: 20px;
            gap: 20px;
            overflow: hidden;
        }

        .sidebar {
            width: 300px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 12px;
            padding: 20px;
            overflow-y: auto;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .content {
            flex: 1;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 12px;
            padding: 30px;
            overflow-y: auto;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .source-item {
            padding: 12px;
            margin-bottom: 8px;
            background: #f5f5f5;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .source-item:hover {
            background: #e8e8e8;
        }

        .source-item.active {
            background: #667eea;
            color: white;
        }

        .result-item {
            padding: 20px;
            margin-bottom: 16px;
            background: #f9f9f9;
            border-radius: 8px;
            border-left: 4px solid #667eea;
        }

        .result-word {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
        }

        .result-translation {
            font-size: 16px;
            color: #666;
            margin-bottom: 8px;
        }

        .result-source {
            font-size: 12px;
            color: #999;
        }

        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        .error {
            padding: 20px;
            background: #fee;
            border-radius: 8px;
            color: #c33;
            margin-bottom: 16px;
        }

        .stats {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        .stat-card {
            flex: 1;
            padding: 16px;
            background: #f5f5f5;
            border-radius: 8px;
            text-align: center;
        }

        .stat-value {
            font-size: 32px;
            font-weight: bold;
            color: #667eea;
        }

        .stat-label {
            font-size: 14px;
            color: #666;
            margin-top: 8px;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #999;
        }

        .empty-state-icon {
            font-size: 64px;
            margin-bottom: 16px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>📚 Memento Dictionary</h1>
        <div class="search-container">
            <input 
                type="text" 
                class="search-input" 
                id="searchInput" 
                placeholder="输入要搜索的单词..."
                autofocus
            />
            <button class="search-button" onclick="searchWord()">搜索</button>
        </div>
    </div>

    <div class="main-content">
        <div class="sidebar">
            <h2 style="margin-bottom: 16px; color: #333;">词典源</h2>
            <div id="sourcesList">
                <div class="loading">加载中...</div>
            </div>
        </div>

        <div class="content">
            <div id="statsContainer" style="display: none;">
                <div class="stats" id="stats"></div>
            </div>
            <div id="resultsContainer">
                <div class="empty-state">
                    <div class="empty-state-icon">🔍</div>
                    <div>在上方输入框中输入单词进行搜索</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let currentSources = [];

        // 页面加载时初始化
        window.addEventListener('DOMContentLoaded', async () => {
            await loadSources();
            await loadStats();
            
            // 回车搜索
            document.getElementById('searchInput').addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    searchWord();
                }
            });
        });

        // 加载词典源
        async function loadSources() {
            try {
                const result = await window.electronAPI.getSources();
                if (result.success) {
                    currentSources = result.data;
                    renderSources(result.data);
                } else {
                    showError('加载词典源失败: ' + result.error);
                }
            } catch (error) {
                showError('加载词典源失败: ' + error.message);
            }
        }

        // 渲染词典源列表
        function renderSources(sources) {
            const container = document.getElementById('sourcesList');
            if (sources.length === 0) {
                container.innerHTML = '<div class="empty-state">暂无词典源</div>';
                return;
            }

            container.innerHTML = sources.map(source => `
                <div class="source-item" onclick="selectSource('${source.name}')">
                    <strong>${source.name}</strong>
                    <div style="font-size: 12px; color: #666; margin-top: 4px;">
                        ${source.description || '无描述'}
                    </div>
                    <div style="font-size: 11px; color: #999; margin-top: 4px;">
                        ${source.enabled ? '✓ 已启用' : '✗ 已禁用'}
                    </div>
                </div>
            `).join('');
        }

        // 选择词典源
        function selectSource(sourceName) {
            // 高亮选中的源
            document.querySelectorAll('.source-item').forEach(item => {
                item.classList.remove('active');
            });
            event.currentTarget.classList.add('active');
        }

        // 搜索单词
        async function searchWord() {
            const word = document.getElementById('searchInput').value.trim();
            if (!word) {
                return;
            }

            const container = document.getElementById('resultsContainer');
            container.innerHTML = '<div class="loading">搜索中...</div>';

            try {
                const result = await window.electronAPI.searchWord(word);
                if (result.success) {
                    renderResults(result.data);
                } else {
                    showError('搜索失败: ' + result.error);
                }
            } catch (error) {
                showError('搜索失败: ' + error.message);
            }
        }

        // 渲染搜索结果
        function renderResults(results) {
            const container = document.getElementById('resultsContainer');
            
            if (results.length === 0) {
                container.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-state-icon">😕</div>
                        <div>未找到相关结果</div>
                    </div>
                `;
                return;
            }

            container.innerHTML = results.map(result => `
                <div class="result-item">
                    <div class="result-word">${result.word}</div>
                    <div class="result-translation">${result.translation || '无翻译'}</div>
                    <div class="result-source">来源: ${result.source}</div>
                </div>
            `).join('');
        }

        // 加载统计信息
        async function loadStats() {
            try {
                const result = await window.electronAPI.getStats();
                if (result.success && result.data) {
                    renderStats(result.data);
                }
            } catch (error) {
                console.error('加载统计信息失败:', error);
            }
        }

        // 渲染统计信息
        function renderStats(stats) {
            const container = document.getElementById('stats');
            const statsContainer = document.getElementById('statsContainer');
            
            if (stats) {
                statsContainer.style.display = 'block';
                container.innerHTML = `
                    <div class="stat-card">
                        <div class="stat-value">${stats.totalWords || 0}</div>
                        <div class="stat-label">总词数</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">${stats.totalSources || 0}</div>
                        <div class="stat-label">词典源</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">${stats.enabledSources || 0}</div>
                        <div class="stat-label">已启用</div>
                    </div>
                `;
            }
        }

        // 显示错误
        function showError(message) {
            const container = document.getElementById('resultsContainer');
            container.innerHTML = `<div class="error">${message}</div>`;
        }
    </script>
</body>
</html>

